
import React, { Component } from 'react';
import './app.scss'
class App extends Component {
    constructor() {
        super()
        this.state = {
            datas: [],
            name: '',
            num: '',
            home: '',
            alterArr: [{
                name: '',
                num: '',
                home: ''
            }],
            newHome: ['请选择城市','河北', '鲁家域', '唐山', '遵化', '海定']
        }
    }
    //保存个体数据
    name = (event) => {
        //实验表明 不能三个在一起
        //姓名
        this.setState({
            name: event.target.value
        })
    }
    num = (event) => {
        // 学号
        // const nums = this.state.num
        this.setState({
            num: event.target.value
        })
        // console.log(typeof this.sta)
    }

    home = (event) => {
        //地址
        this.setState({
            home: event.target.value
        })
    }

    //保存总数据
    save = () => {
        //
        if (this.state.name && this.state.num && this.state.home) {
            const data = {
                name: this.state.name,
                num: this.state.num,
                home: this.state.home
            }
            let arr = this.state.datas
            arr.push(data)
            this.setState({
                //赋值
                datas: arr,
                //清空数据(姓名,地址,学号)
                name: '',
                num: '',
                home: ''
            })
        } else {
            alert("不能为空")
        }
        console.log(this.state.datas)

    }
    //删除
    remove = (index) => {
        let arr = this.state.datas
        arr.splice(index, 1)
        console.log(index, arr)
        this.setState({
            datas: arr
        })
    }
    // 修改要有什么 datas[index]
    // 获取你当前点击的数据 
    // 提取点前点击的数据,修改并插入进原数组
    alter = (index) => {
        const a = this.state.datas[index]
        this.setState({

            alterArr: a
        })
        console.log(this.state.alterArr[0])
    }
    //总是慢一步 alterArr
    newHome = (event) => {
        // const index =  event.target.selectedIndex
        // const key = this.state.newHome[index]
        // console.log(index)
        this.setState({
            home:this.state.newHome[event.target.selectedIndex]
        })
        console.log(this.state.home)
    }

    render() {
        const { datas, name, num, home, newHome } = this.state
        return (
            <div>
                <header>
                    <input type="text" placeholder='姓名' value={name} onChange={this.name} />
                    <input type="text" placeholder='学号' value={num} onChange={this.num} />
                    <input type="text" placeholder='原籍' value={home} onChange={this.home} />
                    <select name="home" id="" onClick={ this.newHome}>
                        {
                            newHome.map((item, index) => {
                                return <option value={item} key={index}>{item}</option>
                            })
                        }
                    </select>
                    <button onClick={this.save}>保存</button>
                </header>
                <table>
                    <thead>
                        <tr>
                            <td>姓名</td>
                            <td>学号</td>
                            <td>原籍</td>

                        </tr>
                        {
                            datas.map((item, index, arr) => {
                                return <tr key={index}>
                                    <td key={index.name}>
                                        {item.name}
                                    </td>
                                    <td key={index.num}>
                                        {item.num}
                                    </td>
                                    <td key={index.home}>
                                        {item.home}
                                    </td>
                                    <th key={index + '删除'} onClick={() => this.remove(index)}>删除</th>
                                    {/* <button key={index + '修改'} onClick={() => this.alter(index)}>修改</button> */}
                                </tr>
                            })
                        }

                    </thead>
                </table>
                {/* <table>
                    <thead>
                        <tr>
                            <td>
                                {alterArr[0].name}
                            </td>
                            <td>
                                {alterArr[0].num}
                            </td>
                            <td>
                                {alterArr[0].home}
                            </td>
                        </tr>
                    </thead>
                </table> */}
            </div>
        );
    }
    //
    // componentDidMount(){
    //     setTimeout(()=>{
    //         this.setState({
    //             orggins:['宝贝','石家庄','松原','网络']
    //         })
    //     },500)
    // }

}

export default App;